<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权限管理</title>
    <!-- elementUI css -->
    <link rel="stylesheet" href="/unpkg/lib-master/theme-chalk/index.css"> 
    <link rel="stylesheet" href="/css/public.css">
    <style type="text/css">
    html {
        min-width: 900px;
        height: 100%;
        overflow-y: hidden;
    }
 
    body {
        background: #f0f2f5;
        margin: 0;
        padding: 0;
        color: rgba(0,0,0,.65);
        font-size: 14px;
        height: 100%;
        overflow-y: hidden;
    }
    #app{
        height: 100%;
        overflow-y: hidden;
    }
    [v-cloak] {
      display: none !important;
  }
  /*公共部分 start*/
  .public_header_container{
    height: 48px;
    background: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding-left: 15px;
    border-bottom: 1px solid #e8e8e8;
}
.public_header_container p{
    font-size: 16px;
    font-weight: 500;
    color: rgba(0,0,0,.85);
    line-height: 28px;
}
.public_main_container{
    padding: 16px;
    box-sizing: border-box;
    height: calc(100% - 49px);
}
.line{
    width: 100%;
    height: 1px;
    background: #ececec;
    margin-top: 12px;
    margin-bottom: 16px;
}
/*搜索*/
.public_search_container{
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #ececec;
    padding: 9px 10px;
    margin-right: 10px;
}
.public_search_container input{
    appearance: none;
    outline: none;
    border: none;
    flex: 1;
}
.public_search_container i{
    cursor: pointer;
    color: #999;
}
/*图标+说明 title*/
.public_IconTitle_contianer{
    margin-top: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.public_IconTitle_contianer svg{
    margin-right: 3px;
}
.public_IconTitle_contianer span{

}
::-webkit-scrollbar {
   /*滚动条整体样式*/
   width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
   height: 1px;
}
::-webkit-scrollbar-thumb {
   /*滚动条里面小方块*/
   border-radius: 10px;
   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
   background   : #999;
}
::-webkit-scrollbar-track {
   /*滚动条里面轨道*/
   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
   border-radius: 10px;
   background   : #ededed;
}
/*公共部分 end*/

/*--------------页面正式部分 start---------------*/

/*头部操作记录 start*/
.public_notice_container{
    display: flex;
    align-items: flex-start;
    padding: 5px 15px;
    margin-bottom: 16px;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%);
    border-radius: 2px;
}
.public_noticeList_container{
    flex: 1;
}
.public_noticeList_hide{
    max-height: 42px;
    overflow: hidden;
}
.public_noticeList_show{
    max-height: 150px;
    overflow: auto;
}

.public_noticeList_container li{
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #ebebeb;
    margin-right: 20px;
}
.public_noticeList_container li:last-child{
    border-bottom: none;
}
.public_noticeListLeft_container{
    display: flex;
    align-items: center;
}
.public_noticeListLeft_container svg{
    margin-right: 2px;
}
.public_noticeListLeft_container b{
    font-weight: bold;
    flex: 1;
    white-space: nowrap;
}
.public_noticeListRight_container{
    display: flex;
    align-items: center;
    flex: 1;
    overflow: hidden;
}
.public_noticeListRight_container span{
    margin-right: 14px;
}
.public_noticeListRight_container img{
    width: 22px;
    height: 22px;
    margin-right: 8px;
}
.public_noticeListRight_container p{
    color: rgba(0,0,0,.65);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 10px;
    flex: 1;
}
.public_NoticeOpen_container{
    cursor: pointer;
    padding-top: 12px;
    padding-left: 10px;
}
/*头部操作记录 end*/

/*主要部分 start*/
/*左侧角色管理 start*/
.AccessManagement_Main_container{
    display: flex;
    height: calc(100% - 68px);
    overflow:hidden;
}
.AccessManagement_RoleFirst_container{
    width: 240px;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%);
    margin-right: 8px;
    padding: 16px 0;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}
.AccessManagement_PublicRoleTitle{
    color: rgba(0,0,0,.85);
    font-size: 15px;
    font-weight: 500;
    padding: 0 24px;
    margin-bottom: 8px;
}
.AccessManagement_RoleFirstList_container{

}
.AccessManagement_RoleFirstList_container li{
    padding: 11px 24px;
    font-size-adjust: 14px;
    margin-bottom: 12px;
    cursor: pointer;
}
.AccessManagement_RoleFirstList_active{
    background: #effaff;
    position: relative;
}
.AccessManagement_RoleFirstList_active::after{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: #1890ff;
}
/*左侧角色管理 end*/

/*右侧数据操作部分 start*/
.AccessManagement_RoleSecond_container{
    flex: 1;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%);
    padding: 16px 24px;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}
.AccessManagement_RoleSecond_tabs_container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 7px;
    border-bottom: 1px solid #f1f1f1;
}
.AccessManagement_RoleSecond_tabsList{
    display: flex;
    align-items: center;
}
.AccessManagement_RoleSecond_tabsList li{
    padding: 10px 0 8px;
    margin-right: 30px;
    position: relative;
    cursor: pointer;
}
.AccessManagement_RoleSecond_tabsList_active{
    color: #1890ff !important;
}
.AccessManagement_RoleSecond_tabsList_active::after{
    position: absolute;
    content: "";
    left: 14px;
    bottom: -8px;
    width: 30px;
    height: 2px;
    background: #1890ff;
}
.AccessManagement_RoleSecond_tabs_content{
    display: flex;
    align-items: center;
}
/*表格部分*/
.AccessManagement_RoleSecond_tables_container{

}
.AccessManagement_RoleSecond_tables_content{

}
/*权限管理*/
.AccessManagement_RoleSecond_power_container{
    padding: 16px 0 24px;
}
.AccessManagement_powerTitle_container{
    display: flex;
    align-items: center;
}
.AccessManagement_powerTitle_container svg{
    margin-right: 3px;
}
.AccessManagement_powerTitle_container p{
    color: #333;
    font-weight: bold;
}
.AccessManagement_powerOtherTitle{
    font-size: 14px;
    line-height: 20px;
    color: #333;
    margin-top: 16px;
}
.AccessManagement_powerDescribe_container{
    display: flex;
    align-items: center;
    margin-top: 4px;
    margin-bottom: 20px;
}
.AccessManagement_powerDescribe_container p{
    font-size: 13px;
}
.AccessManagement_powerDescribe_container a{
    margin-left: 5px;
    color: #1890ff;
}
.AccessManagement_powerTable_container{
    margin-top: 10px;
}
/*右侧数据操作部分 end*/

/*主要部分 end*/

/*页面正式部分 end*/

/*弹窗 添加员工 start*/
.public_main_container .el-dialog__body{
    padding-top: 0;
    padding-bottom: 15px;
}
.dialog_channelCode_container{
    height: 350px;
}
.dialog_channelCode_content{
    display: flex;
    height: calc(100% - 40px);
}
.dialog_channelCode_Left_container{
    flex:1;
    border-right: 1px solid #ececec;
    padding-right: 20px;
    height: 100%;
}
.dialog_channelCode_Right_container{
    flex:1;
    padding-left: 20px;
    height: 100%;
}
.dialog_channelCode_LeftList_container{
    padding: 0 5px 0px 5px;
    height: calc(100% - 42px);
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 10px;
}
.dialog_scrollbar_container::-webkit-scrollbar{
  width:5px;
  height:10px;
  /**/
}
.dialog_scrollbar_container::-webkit-scrollbar-track{
  background: rgb(239, 239, 239);
  border-radius:2px;
}
.dialog_scrollbar_container::-webkit-scrollbar-thumb{
  background: #bfbfbf;
  border-radius:10px;
}
.dialog_scrollbar_container::-webkit-scrollbar-thumb:hover{
  background: #333;
}
.dialog_scrollbar_container::-webkit-scrollbar-corner{
  background: #179a16;
}
.dialog_channelCode_LeftList_container li{
    display: flex;
    align-items: center;
    padding-bottom: 10px;
}
.dialog_channelCode_LeftList_container li:last-child{
    padding-bottom: 0;
}
.dialog_channelCode_LeftList_container li span{
    font-size: 14px;
    font-weight: 400;
    color: rgba(0,0,0,.85);
    line-height: 20px;
    flex:1;
}
.dialog_channelCode_LeftList_container li input{
    cursor: pointer;
}
.dialog_channelCode_Right_container h3{
    font-size: 14px;
    font-weight: 400;
    color: rgba(0,0,0,.85);
    line-height: 22px;
    font-weight: 400;
}
.dialog_channelCode_RightList_container{
    margin-top: 10px;
    padding: 0 5px 0px 5px;
    height: calc(100% - 32px);
    overflow-x: hidden;
    overflow-y: auto;
}
.dialog_channelCode_RightList_container li{
    display: flex;
    align-items: center;
    padding-bottom: 10px;
}
.dialog_channelCode_RightList_container li:last-child{
    padding-bottom: 0;
}
.dialog_channelCode_RightList_container li span{
    font-size: 14px;
    font-weight: 400;
    color: rgba(0,0,0,.85);
    line-height: 20px;
    flex: 1
}
.dialog_channelCode_RightList_container li i{
    cursor: pointer;
}

/*弹窗 添加员工 end*/

/*弹窗 更换角色 start*/
.dialog_ChangeRole_container{

}
.dialog_ChangeRole_Radio_container{

}

.dialog_ChangeRole_publicTitle{
    margin-bottom: 6px;
    font-size: 14px;
    color: #1a1a1a;
    font-weight: 500;
}
.dialog_ChangeRole_publicSecendTitle{
    color: rgba(0,0,0,.45);
    margin-bottom: 12px;
    font-size: 14px;
}
.dialog_ChangeRole_department_container{
    width: 460px;
    height: 223px;
    overflow: auto;
    padding-left: 5px;
    padding-top: 5px;
    background: #fff;
    border: 1px solid #efefef;
}
/*弹窗 更换角色 end*/
</style>

</head>

<body>
    <div id="app" v-cloak>
        <!-- 新版公共头部 -->
        <div class="public_header_container">
            <p>权限管理</p>
        </div>
        <!-- 新公共内容区域 -->
        <div class="public_main_container">
            <!-- 头部的操作记录 -->
            <div class="public_notice_container">
                <ul class="public_noticeList_container" :class="OpenNotice?'public_noticeList_show':'public_noticeList_hide'">
                    <li v-for="(item,index) in NoticeList">
                        <div class="public_noticeListLeft_container">
                            <svg width="20" height="20" viewBox="0 0 1024 1024"><path d="M672.411826 93.273043H77.601391C49.864348 93.273043 22.26087 119.941565 22.26087 146.610087v779.575652C22.26087 952.765217 49.90887 979.478261 77.601391 979.478261h587.865044c27.692522 0 55.340522-26.668522 55.340522-53.292522V146.610087c6.90087-26.713043-20.74713-53.337043-48.395131-53.337044zM395.753739 633.010087H153.689043c-13.846261 0-20.74713-6.678261-20.74713-20.034783 0-13.312 6.90087-19.945739 20.74713-19.945739h242.064696c13.801739 0 20.74713 6.678261 20.747131 19.990261 0 13.312-13.801739 19.990261-20.747131 19.990261z m179.823304-159.922087H153.689043c-13.846261 0-20.74713-6.678261-20.74713-20.034783 0-13.267478 6.90087-19.945739 20.74713-19.945739h421.888c13.801739 0 20.74713 6.678261 20.747131 19.990261 0 13.356522-6.90087 19.990261-20.747131 19.990261z m0-146.610087H153.689043c-13.846261 0-20.74713-6.678261-20.74713-19.990261 0-13.312 6.90087-19.990261 20.74713-19.990261h421.888c13.801739 0 20.74713 6.678261 20.747131 20.034783 0 13.312-6.90087 19.945739-20.747131 19.945739z" fill="#FFDF6F"></path><path d="M395.397565 717.022609l437.069913-437.203479L1001.73913 449.135304l-437.158956 437.114435z" fill="#FF837F"></path><path d="M378.434783 828.14887c12.02087 6.41113 30.096696 12.866783 42.117565 25.733565 12.02087 12.866783 18.075826 25.733565 24.041739 45.011478l120.386783-25.733565L414.541913 712.347826 378.434783 828.14887z" fill="#E6E6E6"></path><path d="M370.287304 839.546435l-21.548521 93.273043 93.317565-21.504c-7.212522-14.336-14.380522-35.884522-28.716522-50.220521-7.168-7.212522-28.716522-14.380522-43.052522-21.548522z" fill="#534E4E"></path><path d="M181.470609 186.546087a21.682087 21.682087 0 0 1-19.277913-21.504V21.548522c0-14.380522 6.41113-21.548522 19.277913-21.548522 12.911304 0 19.322435 7.168 19.322434 21.548522v143.493565c0 14.336-6.455652 21.504-19.322434 21.504z m167.268174 0c-12.866783 0-19.277913-7.123478-19.277913-21.504V21.548522C329.46087 7.123478 335.872 0 348.738783 0c12.911304 0 19.322435 7.168 19.322434 21.548522v143.493565a21.682087 21.682087 0 0 1-19.322434 21.504z m160.857043 0c-6.455652 0-12.911304-7.123478-12.911304-21.504V21.548522c0-14.380522 6.455652-21.548522 19.322435-21.548522 12.911304 0 19.322435 7.168 19.322434 21.548522v143.493565c-6.455652 14.336-12.911304 21.504-25.733565 21.504z" fill="#FFFFFF"></path></svg>
                            <b>操作记录：</b>
                        </div>
                        <div class="public_noticeListRight_container">
                            <span>!{!{item.ctime}}</span>
                            <img :src="item.avatar">
                            <p>!{!{item.record}}</p>
                        </div>
                    </li>
                </ul>
                <span class="public_NoticeOpen_container" @click="OpenNotice = !OpenNotice" v-if="NoticeList.length > 1">!{!{OpenNotice?"收起":"展开"}}</span>
            </div>
            <!-- 主要部分 -->
            <div class="AccessManagement_Main_container">
                <!-- 左侧角色管理 -->
                <div class="AccessManagement_RoleFirst_container">
                    <h3 class="AccessManagement_PublicRoleTitle">角色管理</h3>
                    <ul class="AccessManagement_RoleFirstList_container">
                        <li v-for="(item,index) in RoleList" :key="item.type" @click="switchTabs(item.type)" :class="RoleListActive == item.type?'AccessManagement_RoleFirstList_active':''">!{!{item.role_name}}</li>
                        <!-- <li :class="AccessManagement_RoleFirstList_active" @click="">超级管理员（1）</li>
                        <li :class="AccessManagement_RoleFirstList_active" @click="">管理员（8）</li>
                        <li :class="AccessManagement_RoleFirstList_active" @click="">部分管理员（1）</li>
                        <li :class="AccessManagement_RoleFirstList_active" @click="">普通员工（2）</li> -->
                    </ul>
                </div>
                <!-- 右侧数据操作部分 -->
                <div class="AccessManagement_RoleSecond_container">
                   <!-- Right Header -->
                   <h3 class="AccessManagement_PublicRoleTitle" style="padding: 0;">!{!{roleName}}</h3>
                   <div class="AccessManagement_RoleSecond_tabs_container">
                    <ul class="AccessManagement_RoleSecond_tabsList">
                        <li :class="ManageTabs==1?'AccessManagement_RoleSecond_tabsList_active':''" @click="ManageTabs=1">成员列表</li>
                        <li :class="ManageTabs==2?'AccessManagement_RoleSecond_tabsList_active':''" @click="ManageTabs=2">权限范围</li>
                    </ul>
                    <div class="AccessManagement_RoleSecond_tabs_content" v-if="RoleListActive != '1' && ManageTabs !=2">
                        <div class="public_search_container">
                            <input type="text" v-model="SearchText" placeholder="请输入成员名称">
                            <i class="el-icon-search" @click="searchPeople(RoleListActive,SearchText)"></i>
                        </div>
                        <el-button type="primary" size="medium" @click="dialogTableVisible = true">!{!{RoleListActive == 4?'添加普通员工':(RoleListActive == 3?'添加部门管理员':(RoleListActive == 2?'添加管理员':''))}}</el-button>
                    </div>
                </div>
                <!-- Right 成员列表 -->
                <div class="AccessManagement_RoleSecond_tables_container" v-if="ManageTabs == 1">
                    <div class="public_IconTitle_contianer">
                        <svg t="1615800518811" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5418" width="18" height="18"><path d="M408 536c44.8 0 80 35.2 80 80v208c0 44.8-35.2 80-80 80h-208c-44.8 0-80-35.2-80-80v-208c0-44.8 35.2-80 80-80h208z m400 0c44.8 0 80 35.2 80 80v208c0 44.8-35.2 80-80 80h-208c-44.8 0-80-35.2-80-80v-208c0-44.8 35.2-80 80-80h208z m-400 32h-208c-27.2 0-48 20.8-48 48v208c0 27.2 20.8 48 48 48h208c27.2 0 48-20.8 48-48v-208c0-27.2-20.8-48-48-48z m400 0h-208c-27.2 0-48 20.8-48 48v208c0 27.2 20.8 48 48 48h208c27.2 0 48-20.8 48-48v-208c0-27.2-20.8-48-48-48z m-398.4-432c43.2 0 78.4 35.2 78.4 78.4v211.2c0 43.2-35.2 78.4-78.4 78.4H198.4c-43.2 0-78.4-35.2-78.4-78.4V214.4c0-43.2 35.2-78.4 78.4-78.4h211.2z m0 32H198.4c-25.6 0-46.4 20.8-46.4 46.4v211.2c0 25.6 20.8 46.4 46.4 46.4h211.2c25.6 0 46.4-20.8 46.4-46.4V214.4c0-25.6-20.8-46.4-46.4-46.4z" fill="#313131" p-id="5419"></path><path d="M752 144l112 112c30.4 30.4 30.4 81.6 0 112l-112 112c-30.4 30.4-81.6 30.4-112 0l-112-112c-30.4-30.4-30.4-81.6 0-112l112-112c30.4-32 81.6-32 112 0z m-22.4 22.4c-19.2-19.2-48-19.2-67.2 0l-112 112c-19.2 19.2-19.2 48 0 67.2l112 112c19.2 19.2 48 19.2 67.2 0l112-112c19.2-19.2 19.2-48 0-67.2l-112-112z" fill="#3192F2" p-id="5420"></path></svg>
                        <span>全部共!{!{tableData.length}}人</span>
                    </div>
                    <div class="AccessManagement_RoleSecond_tables_content">
                        <el-table :data="tableData.data" border style="width: 100%" size="medium" :header-cell-style="!{background:'#FAFAFA'}">
                          <el-table-column prop="name" label="成员列表"></el-table-column>
                          <el-table-column prop="department_name" label="所在部门" ></el-table-column>
                          <el-table-column prop="" label="管理部门" >
                            <template v-slot="scope">
                                <span v-for="(item,index) in scope.row.manage_department_name">!{!{item}} </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="操作" width="150">
                            <template slot-scope="scope" >
                                <el-button size="mini" type="info" v-if="RoleListActive == '1'">更换角色</el-button>
                                <el-button size="mini" type="primary" @click="ChangeRoleFun(scope.row)" v-else>更换角色</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination background layout="prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pagesize" :total="tableData.count" ></el-pagination>
                </div>
            </div>
            <!-- Right 权限范围 -->
            <div class="AccessManagement_RoleSecond_power_container" v-if="ManageTabs == 2">

                <!-- table -->
                <div class="AccessManagement_publicLoop_container" v-for="item in ScopeAuthority">
                    <div class="AccessManagement_powerTitle_container">
                        <svg t="1615864131185" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2787" width="14" height="14"><path d="M512.300999 22.875955c-282.939447 0-511.699001 200.465608-511.699001 447.285126 0 12.641975 0.601999 25.283951 1.805996 37.925926 12.039976 125.817754 83.677837 236.585538 190.231628 311.233392L192.639624 987.278072c0 25.885949 28.293945 41.537919 49.965902 28.293945l173.97766-105.349794c31.303939 4.815991 63.209877 7.825985 95.717813 7.825985 267.889477 0 487.619048-179.997648 509.893004-409.3592 1.203998-12.641975 2.407995-25.283951 2.407995-37.925926C1024 223.341564 794.638448 22.875955 512.300999 22.875955zM255.8495 450.897119c0-17.457966 14.447972-31.905938 31.905938-31.905938l46.955908 0c17.457966 0 31.905938 14.447972 31.905938 31.905938 0 17.457966-14.447972 31.905938-31.905938 31.905938l-46.955908 0C270.297472 483.405056 255.8495 468.957084 255.8495 450.897119zM671.830688 630.292769 352.169312 630.292769c-17.457966 0-31.905938-14.447972-31.905938-31.905938 0-17.457966 14.447972-31.905938 31.905938-31.905938l320.263374 0c17.457966 0 31.905938 14.447972 31.905938 31.905938C703.736626 615.844797 689.890653 630.292769 671.830688 630.292769zM736.244562 483.405056 455.71311 483.405056c-17.457966 0-31.905938-14.447972-31.905938-31.905938 0-17.457966 14.447972-31.905938 31.905938-31.905938l279.929453 0c17.457966 0 31.905938 14.447972 31.905938 31.905938C768.1505 468.957084 753.702528 483.405056 736.244562 483.405056z" p-id="2788" fill="#595959"></path></svg>
                        <p>!{!{item.name}}</p>
                    </div>
                    <div class="AccessManagement_powerTable_container" style="padding-bottom: 10px;">
                        <el-table :data="item.sub" border style="width: 100%" size="medium" :header-cell-style="!{background:'#FAFAFA'}">
                          <el-table-column prop="name" label="功能名称" width="150"></el-table-column>
                          <el-table-column label="开关" width="150" v-if="RoleListActive == 3 || RoleListActive == 4">
                            <template slot-scope="scope">
                              <el-switch v-model="scope.row.is_auth"  @change="changeSwitch(scope.row)" />
                          </template>       
                      </el-table-column>
                      <el-table-column prop="power" label="设置管理权限" >
                        <template slot-scope="scope">
                          <el-select v-if="scope.row.optional == true" v-model="scope.row.selected" placeholder="请选择" style="margin-left: 10px;" size="medium" @change="((val)=>!{UpdateRoleAuthFun(val,scope.row)})">
                           <el-option
                           v-for="items in scope.row.optional_data"
                           :key="items.id"
                           :label="items.name"
                           :value="items.id">
                       </el-option>
                   </el-select>
                   <p v-else>!{!{scope.row.optional_describe}}</p>
               </template> 
           </el-table-column>
       </el-table>
   </div>
</div>

</div>
</div>
</div>
<!--弹窗 添加管理员弹窗 start -->
<el-dialog :title="RoleListActive == 4?'添加普通员工':(RoleListActive == 3?'添加部门管理员':(RoleListActive == 2?'添加管理员':''))" :visible.sync="dialogTableVisible" width="665px" v-cloak>
  <div class="dialog_channelCode_container">
      <div class="dialog_channelCode_content">
          <div class="dialog_channelCode_Left_container">
            <el-input size="small" placeholder="请输入成员昵称" v-model="searchChannelCode" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="searchChannelCodeFun"></el-button>
            </el-input>
            <ul class="dialog_channelCode_LeftList_container dialog_scrollbar_container" @scroll="handleScrollGetPopUserRoleListFun">
                <li v-for="item in contact_way_list" :key="item.id" v-if="searchChannelCode!=''?item.name == searchChannelCode:true">
                    <span>!{!{item.name}}</span>
                    <input type="checkbox" :value="item.name" v-model="item.ischeck">
                </li>
            </ul>
        </div>
        <div class="dialog_channelCode_Right_container">
          <h3>已选成员</h3>
          <ul class="dialog_channelCode_RightList_container dialog_scrollbar_container">
              <li v-for="(item,index) in contact_way_list" :key="item.id" v-if="item.ischeck == true">
                  <span>!{!{item.name}}</span>
                  <i class="el-icon-close" :data-index="index" @click="item.ischeck = false"></i>
              </li>
          </ul>
      </div>
  </div>
  <el-row justify="end" type="flex" style="padding-top: 8px;">
    <el-button size="small" @click="dialogTableVisible = false">取消</el-button>
    <el-button size="small" type="primary" @click="submitChannelCodeFun">确定</el-button>
</el-row>
</div>
</el-dialog>
<!--弹窗   添加管理员弹窗 end -->

<!-- 弹窗 更换角色 start -->
<el-dialog title="更换角色" :visible.sync="dialogChangeRoleVisible" width="524px" center v-cloak>
    <div class="dialog_ChangeRole_container">
        <div class="dialog_ChangeRole_Radio_container">
            <h3 class="dialog_ChangeRole_publicTitle">设置角色</h3>
            <el-radio-group v-model="ChangeRole" @change="ChangeRoleRadioFun">
                <el-radio label="2">管理员</el-radio>
                <el-radio label="3">部门管理员</el-radio>
                <el-radio label="4">普通员工</el-radio>
            </el-radio-group>
            <h3 class="dialog_ChangeRole_publicTitle" style="margin-top: 16px;">拥有部门管理权限，可查看指定部门相关的数据</h3>
            <div class="dialog_ChangeRole_branch_container" v-if="ChangeRole == '3'">
                <h4 class="dialog_ChangeRole_publicSecendTitle">选择管理部门</h4>
                <div class="dialog_ChangeRole_department_container">
                  <el-tree
                  :data="departmentList"
                  :check-strictly="true"
                  :props="props"
                  ref="treeForm"
                  node-key='department_id' 
                  show-checkbox>
              </div>
          </div>
      </div>
      <el-row justify="end" type="flex" style="padding-top: 8px;">
        <el-button size="small" @click="dialogChangeRoleVisible = false">取消</el-button>
        <el-button size="small" type="primary" @click="submitDialogChangeRoleFun">确定</el-button>
    </el-row>
</div>
</el-dialog>
<!-- 弹窗 更换角色 end -->
</div>
</div>
<!-- vue js -->
<script src="/unpkg/unpkg.vue.js"></script>
<script src="/cdn/qs.min9.js"></script>
<script src="/unpkg/lib-master/index.js"></script>
<script src="/unpkg/unpkg.axios.min.js"></script>
<script type="text/x-template" id="item-template">
  <li :data-id="item.department_id">
    <div class="">
      <span v-if="isFolder" @click="toggle">[!{!{ isOpen ? '-' : '+' }}]</span>
      <input type="checkbox" :value="item.department_id" v-model="item.selected">
      <span>!{!{ item.department_name }}</span>
  </div>
  <ul v-show="isOpen" v-if="isFolder">
      <tree-item class="item" v-for="(child, index) in item.children" :key="index" :item="child" @make-folder="$emit('make-folder', $event)" @add-item="$emit('add-item', $event)">
      </tree-item>
  </ul>
</li>
</script>

<script type="text/javascript">
    var myapp = new Vue({
        el: '#app',
        data() {
            return {
                    currentPage: 1, //初始页
                    pagesize: 10, //    每页的数据
                    pageTotal:null,//按员工查看总条目数
                    SearchText:'',//搜索框输入内容
                    RoleList:[],//角色列表数据
                    RoleListActive:null,//当前选中的角色管理
                    OpenNotice:false,//公告展开收起切换
                    NoticeList:[],//公告列表
                    tableData: {},//表格数据
                    roleName:'超级管理员',
                    ManageTabs:1,//切换 成员列表或权限范围
                    // 添加管理员弹窗 start
                        dialogTableVisible: false,//弹窗数据
                        searchChannelCode:'',//添加管理员弹窗 搜索框
                        contact_way_list:[],//添加管理员弹窗 左侧加载列表
                        channelCodeSelectList:[],//添加管理员弹窗 选中的列表
                        contact_way_listPage:1,//页数
                        contact_way_listPagesize:10,//条数
                        contact_way_listCount:'',//总数
                    // 添加管理员弹窗 send
                    // 弹窗部分 更换角色 start
                        ChangeRole:'',//更换角色
                        dialogChangeRoleVisible:false,//显示添加群里对话框
                        props: {
                          label: 'department_name',
                          children: 'nextData'
                      },

                        departmentList:[],//部门列表
                    // 弹窗部分 更换角色 end
                    // 权限范围 start
                        ScopeAuthority:{},//接口获取的权限范围
                        //消息存档数据权限
                        xxcdTable:[{
                            name: '消息存档',
                            power: '若员工开通了消息存档，可查看部门员工的消息存档数据'
                        },{
                            name: '违规提醒',
                            power: '可创建修改违规关键词，可查看部门员工的违规关键词提醒'
                        },{
                            name: '删人提醒',
                            power: '可查看部门员工删除客户数据'
                        },],
                        //客户数据权限
                        khsjTable:[{
                            name: '客户管理',
                            power: '可查看部门员工的客户数据，允许对客户进行打标签等信息的修改'
                        },{
                            name: '客户阶段管理',
                            power: '可查看部门员工的客户数据，设置客户阶段管理状态，允许设置客户阶段管理规则'
                        },{
                            name: '流失提醒',
                            power: '可查看部门员被客户删除的提醒'
                        },{
                            name: '客户群管理',
                            power: '可查看部门员工创建的客户群数据'
                        },],
                        //引流获客
                        ylhkTable:[{
                            name: '渠道活码',
                            power: '可管理渠道活码，对全部员工创建、修改和删除渠道活码'
                        },{
                            name: '批量加好友',
                            power: '可管理批量添加好友，为全部员工创建批量加好友规则'
                        },{
                            name: '企微任务宝',
                            power: '可为企业全部员工创建任务宝活动'
                        },],
                        //客户转化
                        khzhTable:[{
                            name: '客户群发',
                            power: '可为全部员工创建客户群发任务'
                        },{
                            name: '自动打标签',
                            power: '可创建、删除全部员工的自动打标签的规则'
                        },{
                            name: '企业话术库',
                            power: '可创建、删除和修改全部员工的企业话术'
                        },{
                            name: '好友欢迎语',
                            power: '可创建、删除和修改全部员工的好友欢迎语'
                        },{
                            name: '自定义表单',
                            power: '可创建、删除和修改全部员工的自定义表单'
                        },{
                            name: '直播统计',
                            power: '可查看全部直播数据'
                        },{
                            name: '小红包',
                            power: '可为全部员工创建红包模板、设置红包可用员工范围和红包限额'
                        },{
                            name: '素材库',
                            power: '可同步公众号的文章或添加各种类型的文件'
                        },{
                            name: '互动雷达',
                            power: '可创建、删除和修改全部员工的雷达链接'
                        },],
                        //客户管理
                        khglTable:[{
                            name: '客户标签',
                            power: '可查看管理「全部客户」标签，为「企业全部员工」创建、删除和修改客户标签'
                        },{
                            name: '自定义信息',
                            power: '可创建、删除和修改基本信息和自定义字段'
                        },],
                        //客户群运营
                        khqyyTable:[{
                            name: '客户群群发',
                            power: '可为企业全部员工创建客户群群发任务'
                        },{
                            name: '群SOP',
                            power: '可创建群SOP规则，可为企业全部员工的群聊设置群SOP规则'
                        },{
                            name: '群日历',
                            power: '可创建群日历规则，可为企业全部员工的群聊设置群日历规则'
                        },{
                            name: '自动拉群',
                            power: '可以创建、删除和修改自动拉群，可为企业全部员工的群聊创建拉群'
                        },{
                            name: '标签建群',
                            power: '可以创建、删除和修改标签建群，可为企业全部员工的群聊创建标签建群'
                        },{
                            name: '客户群提醒',
                            power: '可为企业全部员工的群聊设置客户群提醒'
                        },],
                        //朋友圈运营
                        pyqyyTable:[{
                            name: '历史朋友圈',
                            power: '可以开启或关闭历史朋友圈功能'
                        },{
                            name: '企业朋友圈',
                            power: '允许创建、删除和修改，可以给全部员工发送企业朋友圈'
                        },],
                        //聊天侧边栏
                        ltcblTable:[{
                            name: '快捷回复',
                            power: '可在侧边栏使用快捷回复'
                        },{
                            name: '客户画像',
                            power: '可在侧边栏使用客户画像'
                        },{
                            name: '一客一码',
                            power: '可在侧边栏使用一客一码'
                        },{
                            name: '运营工具',
                            power: '可在侧边栏使用运营工具'
                        },],
                        //应用管理
                        yyglTable:[{
                            name: '我的应用',
                            power: '可以使用或删除应用'
                        },{
                            name: '应用中心',
                            power: '可为企业添加应用'
                        },],

                    // 权限范围 end
                };
            },
            mounted() {
                // this.$nextTick(() => {
                // });
                this.GetRecordFun();//加载公告列表
                this.GetRoleListFun();//加载角色列表数据
                this.GetDepartmentListFun();//加载部分数据
            },
            methods: {
                // 初始页currentPage、初始每页数据数pagesize和数据data
                handleSizeChange: function(size) {
                    this.pagesize = size;
                    console.log(this.pagesize) //每页下拉显示数据
                },
                handleCurrentChange: function(currentPage) {
                    let t = this;
                    this.currentPage = currentPage;
                    console.log(this.currentPage) //点击第几页
                    t.GetRoleTableDataFun(t.RoleListActive);
                },
                // 切换角色管理
                switchTabs:function(type){
                    console.log(type)
                    this.currentPage = 1;
                    this.GetRoleTableDataFun(type)
                },
                // 搜索成员
                searchPeople:function(RoleListActive,SearchText){
                    this.currentPage = 1;
                    this.GetRoleTableDataFun(RoleListActive,SearchText)
                },
            	// 表格中点击更换角色
                ChangeRoleFun:function(e){
                    let t = this;
                    console.log(e);
                    t.state = new Array(e.id);
                    console.log(t.state);
                    t.ChangeRole = t.RoleListActive;
                    t.dialogChangeRoleVisible = true;
                },

                // 添加管理员弹窗 start
                // 添加管理员弹窗 提交
                submitChannelCodeFun:function(e){
                    let t = this;
                    console.log(this.contact_way_list);
                    let ChannelCodeList =  this.contact_way_list.filter((res)=>{
                        return res.ischeck === true
                    })
                    console.log(ChannelCodeList);
                    let UserId = ChannelCodeList.map(item => item.id);
                    console.log(UserId);
                    t.state = UserId;
                    console.log(UserId);
                    t.currentPage = 1;
                    this.UpdateUserRoleFun(UserId);

                    this.dialogTableVisible = false;
                },
                // 添加管理员弹窗 搜索
                searchChannelCodeFun:function(){
                    console.log(this.searchChannelCode);
                },
                // 添加管理员弹窗 end

                // 弹窗部分 更换角色 start
                // 对话框 更换角色 点击确定
                submitDialogChangeRoleFun:function(e){
                    let t = this;
                    
                    let DepartmentId = '';
                    console.log(t.ChangeRole);
                    if(t.ChangeRole == 3){
                        console.log(this.$refs.treeForm.getCheckedKeys());
                        DepartmentId = this.$refs.treeForm.getCheckedKeys();
                        if(DepartmentId.length == 0){
                            t.$message({
                                message: '请勾选部门后点击确定',
                                type: 'error',
                                showClose: true,
                                center: true
                            });
                            return
                        }
                    }
                    console.log(DepartmentId);
                    console.log(DepartmentId.length);
                    
                    t.UpdateUserRoleFun(t.state,DepartmentId);//更改用户角色
                    t.currentPage = 1;
                    t.GetRoleTableDataFun(t.RoleListActive);//刷新当前table部分数据
                    t.dialogChangeRoleVisible = false;
                },
                // 弹窗更换角色 切换角色
                // 切换设置角色
                ChangeRoleRadioFun:function(event){
                    let t = this;
                    console.log(event)
                },
                // 加载tree组件数据
                // loadNode(node, resolve) {
                //  console.log(node);
                //  console.log(this.$refs.treeForm);
                //  console.log(node);
                //   let t = this;

                //   let requestData = {
                //     id:node.id
                //   };
                //   console.log(requestData)
                //   axios.post('https://qiye.sophp.cn/Addons/QyWechat/Admin/Rbac/department_list-47.html', Qs.stringify(requestData), {
                //     headers: {
                //       'Content-Type': 'application/x-www-form-urlencoded'
                //     },
                //   }, ).then(function(res) {
                //     console.log(res.data.data)
                //     if(res.data.status == "success"){
                //       resolve(res.data.data)
                //     }else{
                //       console.log(res.data.msg);
                //       t.$message({
                //         message: res.data.msg,
                //         type: 'error',
                //         showClose: true,
                //         center: true
                //       });
                //     }
                //   }).catch(function(res) {
                //     console.log(res);
                //   }).finally(function(res) {
                //     t.fullscreenLoading = false;
                //   });
                // },
                // 弹窗部分 更换角色 end
                // 弹窗部分 选择群聊 start
                
                // 弹窗部分 选择群聊 end
                // 获取公告列表 操作记录
                GetRecordFun:function(){
                    let t = this;
                    let requestData = {

                    };
                    console.log(requestData)
                    axios.post('/Addons/QyWechat/Admin/Rbac/record.html', Qs.stringify(requestData), {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                    }, ).then(function(res) {
                        console.log(res)
                        if(res.data.status == "success"){
                            t.NoticeList = res.data.data;
                        }else{
                            console.log(res.data.msg);
                            t.$message({
                                message: res.data.msg,
                                type: 'error',
                                showClose: true,
                                center: true
                            });
                        }
                    }).catch(function(res) {
                        console.log(res);
                    }).finally(function(res) {
                        t.fullscreenLoading = false;
                    });
                },
                // 获取角色列表数据
                GetRoleListFun:function(){
                    let t = this;
                    let requestData = {

                    };
                    console.log(requestData)
                    axios.post('/Addons/QyWechat/Admin/Rbac/role.html', Qs.stringify(requestData), {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                    }, ).then(function(res) {
                        console.log(res)
                        if(res.data.status == "success"){
                            t.RoleList = res.data.data;
                            t.RoleListActive = res.data.data[0].type;
                            t.GetRoleTableDataFun(res.data.data[0].type);//获取用户角色列表数据（teble部分）
                            t.GeAuthFun(t.RoleListActive);//获取权限范围
                            // t.GetDepartmentListFun();//获取部门列表
                        }else{
                            console.log(res.data.msg);
                            t.$message({
                                message: res.data.msg,
                                type: 'error',
                                showClose: true,
                                center: true
                            });
                        }
                    }).catch(function(res) {
                        console.log(res);
                    }).finally(function(res) {
                        t.fullscreenLoading = false;
                    });
                },
                // 获取用户角色列表数据（teble部分）
                GetRoleTableDataFun:function(type,name){
                    if(name == ""){
                        this.$message.error('不能为空');
                        return
                    }
                //	console.log('type'+type);
                //	console.log('name'+name);
                let t = this;
                t.RoleListActive = type;
                t.ManageTabs = 1;
                let requestData = {
                    "type": type,
                    "name": name,
                    "page":t.currentPage,
                    "pageSize":t.pagesize
                };
                console.log(requestData)
                axios.post('/Addons/QyWechat/Admin/Rbac/user_role_list.html', Qs.stringify(requestData), {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                }, ).then(function(res) {
                    console.log(res)
                    if(res.data.status == "success"){
                     t.tableData = res.data;
                     t.roleName = res.data.msg;
                     t.contact_way_listPage = 1;
                     t.contact_way_list = [];
                     if(t.RoleListActive != '1'){
                        console.log('加载弹框用户列表');
                                t.GetPopUserRoleListFun(type);//加载弹框用户列表(弹窗部分)
                                t.GeAuthFun(type);//加载权限范围
                                // t.GetDepartmentListFun();//获取部门列表

                            }
                        }else{
                            console.log(res.data.msg);
                            t.$message({
                                message: res.data.msg,
                                type: 'error',
                                showClose: true,
                                center: true
                            });
                        }
                    }).catch(function(res) {
                        console.log(res);
                    }).finally(function(res) {
                        t.fullscreenLoading = false;
                    });
                },
                // 获取部门列表
                GetDepartmentListFun:function(){
                    let t = this;
                    let requestData = {

                    };
                    console.log(requestData)
                    axios.post('/Addons/QyWechat/Admin/Rbac/department_list.html', Qs.stringify(requestData), {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                    }, ).then(function(res) {
                        console.log(res)
                        if(res.data.status == "success"){
                            t.departmentList = res.data.data;
                                // console.log(t.DepartmentList);
                            }else{
                                console.log(res.data.msg);
                                t.$message({
                                    message: res.data.msg,
                                    type: 'error',
                                    showClose: true,
                                    center: true
                                });
                            }
                        }).catch(function(res) {
                            console.log(res);
                        }).finally(function(res) {
                            t.fullscreenLoading = false;
                        });
                    },
                // 权限范围
                GeAuthFun:function(type){
                    console.log(type);
                    let t = this;
                    let requestData = {
                        'type':type,
                    };
                    console.log(requestData)
                    axios.post('/Addons/QyWechat/Admin/Rbac/auth.html', Qs.stringify(requestData), {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                    }, ).then(function(res) {
                        console.log(res)
                        if(res.data.status == "success"){
                            t.ScopeAuthority = res.data.data;
                            console.log(t.ScopeAuthority);
                        }else{
                            console.log(res.data.msg);
                            t.$message({
                                message: res.data.msg,
                                type: 'error',
                                showClose: true,
                                center: true
                            });
                        }
                    }).catch(function(res) {
                        console.log(res);
                    }).finally(function(res) {
                        t.fullscreenLoading = false;
                    });
                },
                // 权限表格中切换开关
                changeSwitch (row) {
                    let t = this;
                    console.log(JSON.parse(JSON.stringify(row)));
                    let requestData = {
                      'type':t.RoleListActive,
                      'status':row.is_auth == true?1:0,
                      'menulink':row.file,
                      'name':row.name,
                  };
                  console.log(requestData)
                  axios.post('/Addons/QyWechat/Admin/Rbac/update_role_menu_auth.html', Qs.stringify(requestData), {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                }, ).then(function(res) {
                    console.log(res)
                    if(res.data.status == "success"){
                        t.$message({
                            message: res.data.msg,
                            type: 'success',
                            showClose: true,
                            center: true
                        });
                    }else{
                        console.log(res.data.msg);
                        t.$message({
                            message: res.data.msg,
                            type: 'error',
                            showClose: true,
                            center: true
                        });
                    }
                }).catch(function(res) {
                    console.log(res);
                }).finally(function(res) {
                    t.fullscreenLoading = false;
                });
            },
                // 切换权限select
                UpdateRoleAuthFun:function(value, row){

                    console.log(value);
                    console.log(row);
                    let t = this;
                    let requestData = {
                        'type':t.RoleListActive,
                        'authflag':value,
                        'menulink':row.file,
                        'name':row.name
                    };
                    console.log(requestData)
                    axios.post('/Addons/QyWechat/Admin/Rbac/update_role_auth.html', Qs.stringify(requestData), {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                    }, ).then(function(res) {
                        console.log(res)
                        if(res.data.status == "success"){
                            t.$message({
                                message: res.data.msg,
                                type: 'success',
                                showClose: true,
                                center: true
                            });
                        }else{
                            console.log(res.data.msg);
                            t.$message({
                                message: res.data.msg,
                                type: 'error',
                                showClose: true,
                                center: true
                            });
                        }
                    }).catch(function(res) {
                        console.log(res);
                    }).finally(function(res) {
                        t.fullscreenLoading = false;
                    });
                },
                // 弹窗部分 start
                 // 添加员工弹窗 下拉加载
                handleScrollGetPopUserRoleListFun:function(e){
                    let t = this;
                    if(this.contact_way_listPagesize * this.contact_way_listPage >= t.contact_way_listCount){
                        console.log("已加载完");
                        return
                    }

                    let size = this.contact_way_listPage + 1;

                    if(e.srcElement.scrollTop + e.srcElement.offsetHeight >= e.srcElement.scrollHeight){
                        this.contact_way_listPage = size;
                        console.log(this.contact_way_listPage);
                        t.GetPopUserRoleListFun(t.RoleListActive);
                    }
                    
                },
                // 点击添加员工弹窗 加载弹框用户列表
                GetPopUserRoleListFun:function(type,name){
                    if(name == ""){
                        this.$message.error('不能为空');
                        return
                    }
                    let t = this;
                    let requestData = {
                        type:type,
                        name:name,
                        pageSize:t.contact_way_listPagesize,
                        page:t.contact_way_listPage
                    };
                    console.log(requestData)
                    axios.post('/Addons/QyWechat/Admin/Rbac/pop_user_role_list.html', Qs.stringify(requestData), {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                    }, ).then(function(res) {
                        console.log(res)
                        if(res.data.status == "success"){
                            t.contact_way_listCount = res.data.count;
                            t.contact_way_list = t.contact_way_list.concat(res.data.data);
                            console.log(t.contact_way_list);
                        }else{
                            console.log(res.data.msg);
                            t.$message({
                                message: res.data.msg,
                                type: 'error',
                                showClose: true,
                                center: true
                            });
                        }
                    }).catch(function(res) {
                        console.log(res);
                    }).finally(function(res) {
                        t.fullscreenLoading = false;
                    });
                },

                // 添加员工弹窗 提交
                UpdateUserRoleFun:function(UserId,DepartmentId){
                    console.log(UserId);
                    console.log(DepartmentId);
                    console.log(this.dialogChangeRoleVisible);
                    if(UserId.length == 0){
                        this.$message.error('没有选择添加的人员');
                        return
                    }
                    console.log('1');
                    let t = this;
                    let requestData = {
                        'type':t.dialogChangeRoleVisible?t.ChangeRole:t.RoleListActive,
                        'id':UserId,
                        'department_id':DepartmentId
                    };
                    console.log(requestData)
                    axios.post('/Addons/QyWechat/Admin/Rbac/update_user_role.html', Qs.stringify(requestData), {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                    }, ).then(function(res) {
                        console.log(res)
                        if(res.data.status == "success"){
                            t.GetRoleTableDataFun(t.RoleListActive);
                            t.$message({
                                message: res.data.msg,
                                type: 'success',
                                showClose: true,
                                center: true
                            });
                        }else{
                            console.log(res.data.msg);
                            t.$message({
                                message: res.data.msg,
                                type: 'error',
                                showClose: true,
                                center: true
                            });
                        }
                    }).catch(function(res) {
                        console.log(res);
                    }).finally(function(res) {
                        t.fullscreenLoading = false;
                    });
                },
                // 弹窗部分 end
                

            },
        })
    </script>
</body>

</html>